<template>
  <div>
    <div class="card">您好，{{ user.username }}！欢迎使用本系统！</div>
    <div class="card" style="margin-top: 10px;">
      <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold;">公告信息</div>
      <div style="height: 100vh; color:blue">
        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.creatTime"
          >{{ activity.content }}</el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "HomeView",
  data() {
    return {
      reverse: true,
      activities: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    };
  },
  mounted() {
    this.getAnnouncement();
  },
  created() {
    this.getAnnouncement();
  },
  methods: {
    getAnnouncement() {
      request
        .get("/Announcement/getAll")
        .then(res => {
          if (res.code == 200) {
            this.activities = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          console.error("Error occurred while fetching data:", error);
        });
    }
  }
};
</script>
<style scoped>
.card {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  padding: 15px 0 15px 10px;
}
</style>
